<template>
	<view class="search">
		<view class="search-input">
			<tn-button
				class="search-input_icon tn-main-gradient-indigo">
					<text class="tn-icon-search"></text>
				</tn-button>
			<tn-input
				v-model="searchValue"
				type="text"
				border
				placeholder="请输入关键字搜索文章..." />
				<tn-button class="search-input_button tn-main-gradient-purple" @click="searchSubmit">搜索</tn-button>
		</view>
		<view class="search-tag" v-if="tags.length >0 && searchValue == ''">
			<view class="search-tag_title">
				<text @click="changeTags">
					搜索历史
					<text class="tn-icon-up" v-if="iscollopes"></text>
					<text class="tn-icon-down" v-if="!iscollopes"></text>
				</text>
				<text class="tn-icon-delete" @click="deleteTag"></text>
			</view>
			<view class="search-tag_content">
				<tn-tag
					v-for="(tag,index) in tags"
					:key="index"
					@click="clickTag(tag)"
					class="tn-main-gradient-lime--light">{{ tag }}</tn-tag>
			</view>
		</view>
		<scroll-view
			class="search-scroll"
			scroll-y="true"  
			@scrolltolower="scrolltolower">
		  <view class="search_item" v-for="option in blogList" :key="option.id" @click="openDetail(option)">
		  	<h1 class="kaiti">{{ option.title }}</h1>
		  	<view class="search_item--box">
		  		<text class="search_item--text">{{ option.preface }}</text>
		  		<img v-if="option.img && option.img != ''" :src="option.img" mode=""></img>
		  	</view>
		  	<view class="search_item--author">
		  		<view class="">
		  			<text class="tn-icon-my-simple-fill tn-color-cyan" style="padding: 10rpx;"></text>
		  			<text>{{ option.author }}</text>
		  		</view>
		  		<text>{{ option.address }}</text>
		  		<text>{{ option.createTime }}</text>
		  	</view>
		  	<view class="search_item--system">
		  	</view>
		  	<view class="search_item--like">
		  		<view class="iconlike">
		  			<text class="tn-icon-message" style="padding: 10rpx;"></text>
		  			<text>{{ option.comment }}</text>
		  		</view>
		  		<view class="iconlike">
		  			<text class="tn-icon-praise" style="padding: 10rpx;"></text>
		  			<text>{{ option.like }}</text>
		  		</view>
		  		<view class="iconlike">
		  			<text class="tn-icon-eye" style="padding: 10rpx;"></text>
		  			<text>{{ option.view }}</text>
		  		</view>
		  	</view>
		  </view>
		</scroll-view>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tags:[],
				searchValue:'',
				iscollopes:false,
				tagList:[],
				pages:{
					pageNo:1,
					pageSize:10
				},
				blogList:[],
				total:''
			};
		},
		onShow() {
			try {
				const value = uni.getStorageSync('tags');
				if (value) {
					if(!this.iscollopes){
						this.tags = value.splice(0,6)
					} else {
						this.tags = uni.getStorageSync('tags')
					}
				}
			} catch (e) {
				// error
			}
		},
		methods:{
			searchSubmit(){
				this.tags.unshift(this.searchValue)
				this.tags = [...new Set(this.tags)]
				uni.setStorageSync('tags',this.tags);
				uni.showLoading({
					title: '加载中'
				});
				let obj = {
					title:this.searchValue,
					...this.pages
				}
				this.$api.getBlogSearch(obj).then(res => {
					if(res.code == 200){
						this.blogList = res.data
						this.total = res.total
						this.pages.pageSize = res.pageSize
						uni.hideLoading();
					}
				})
			},
			deleteTag(){
				this.tags = []
				try {
					uni.removeStorageSync('tags');
				} catch (e) {
					// error
				}
			},
			changeTags(){
				this.iscollopes = !this.iscollopes
				let arr = JSON.parse(JSON.stringify(this.tags))
				if(!this.iscollopes){
					this.tags = arr.splice(0,6)
				} else {
					this.tags = uni.getStorageSync('tags')
				}
			},
			//获取文章
			getBlogList(params){
				uni.showLoading({
					title: '加载中'
				});
				let obj = {
					secondClass:String(params.id),
					...this.pages
				}
				this.$api.getBlog(obj).then(res => {
					if(res.code == 200){
						this.blogList = res.data
						this.total = res.total
						this.pages.pageSize = res.pageSize
						uni.hideLoading();
					}
				})
			},
			//查看博客详情
			openDetail(item){
				uni.navigateTo({
					url:`/pages/detail/index?id=${item.id}`
				})
			},
			scrolltolower(){
				this.pages.pageSize += 10
				if(this.pages.pageSize > this.total){
					this.$refs.toast.show({
						title: '提示',
						content: '已加载全部',
						icon: 'success',
						image: '',
						duration: 3000
					})
					return false
				}
				this.searchSubmit()
			},
			clickTag(tag){
				this.searchValue = tag
				this.searchSubmit()
			}
		}
	}
</script>

<style lang="scss">
.search{
	padding: 20rpx;
	.tn-input{
		justify-content: space-between;
		background-color: #F4F4F4;
		border-radius: 0;
		height: 70rpx;
	}
	&-input{
		display: flex;
		&_icon{
			border-radius: 8rpx 0 0 8rpx;
			height: 70rpx !important;
		}
		&_button{
			border-radius: 0 8rpx 8rpx 0;
			height: 70rpx !important;
		}
	}
	&-tag{
		margin-top: 20rpx;
		&_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #AAAAAA;
		}
		&_content{
			padding: 20rpx 0 0 0;
			.tn-tag{
				margin-right: 20rpx !important;
				border-radius: 30rpx;
				width: unset !important;
				margin-bottom: 20rpx !important;
			}
		}
	}
	&-scroll{
		background-color: #fff;
		height: calc(100vh - 200rpx);
		background-color: #fff;
	}
	&_item{
		padding: 20rpx;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		margin-top: 20rpx;
		border-radius: 8rpx;
		h1{
			font-size: 32rpx;
			margin-bottom: 10rpx;
			font-weight: 200;
		}
		&--box{
			display: flex;
			margin-bottom: 26rpx;
			img{
				width: 160rpx;
				height: 90rpx;
			}
		}
		&--text{
			font-size: 28rpx;
			color: #5F7E8B;
			line-height: 42rpx;
			display: -webkit-box; 
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		&--author{
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #838383;
			margin-bottom: 20rpx;
		}
		&--system{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #838383;
			margin-bottom: 20rpx;
			.iconsize{
				margin-right: 20rpx;
				font-size: 24rpx;
			}
		}
		&--like{
			display: flex;
			font-size: 28rpx;
			color: #838383;
			.iconlike{
				margin-right: 10rpx;
			}
		}
	}
}
</style>
